<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Catch The Cat</title>
    <style>
        * {
            padding: 0;
            margin: 0
        }

        #catch-the-cat {
            width: 100%;
            margin-top: 32px;
            text-align: center
        }
    </style>
</head>

<body>
    <script src="./phaser.min.js"></script>
    <script src="./catch-the-cat.js"></script>
    <div id="catch-the-cat"></div>
    <script>
        window.game = new CatchTheCatGame({
            w: 11,
            h: 11,
            r: 20,
            backgroundColor: 16777215,
            parent: "catch-the-cat",
            statusBarAlign: "center"
        })
    </script>
    <style>
        .github-corner:hover .octo-arm {
            animation: octocat-wave 560ms ease-in-out
        }

        @keyframes octocat-wave {

            0%,
            100% {
                transform: rotate(0)
            }

            20%,
            60% {
                transform: rotate(-25deg)
            }

            40%,
            80% {
                transform: rotate(10deg)
            }
        }

        @media (max-width: 500px) {
            .github-corner:hover .octo-arm {
                animation: none
            }

            .github-corner .octo-arm {
                animation: octocat-wave 560ms ease-in-out
            }
        }
    </style>
</body>

</html>